<template>
    <div class="divnn">
        <div class="por">
            <div class="shouzhi anniu" v-if="items.service_url" @click="kefu">联系客服</div>
        </div>
        <div class="leftboxs">
            <img class="logo" src="../../assets/logoss.png" />


            <div class="titles">手机号码查询</div>
            <div class="inputbb">
                <input class="inputs" type="text" v-model="mobile" placeholder="请输入手机号">
                <div class="searchs shouzhi anniu" @click="getlist">立刻查询</div>
            </div>
            <div v-if="list.length == 0">

                <img class="kong" src="../../assets/kong.png" />
                <p style="font-size: 20px;margin-top:0">无订单记录</p>

                <div class="fanhui anniu" @click="gohome">
                    返回主页
                </div>
            </div>

            <div v-if="list.length > 0">
                <div class="titles">选择版本</div>
                <div class="inputbb">
                    <select class="selects" id="basic-select" v-model="selectid" @change="change">
                        <option v-for="(option, index) in list" :key="index" :value="index">
                            {{ option.type_name }}
                        </option>
                    </select>
                </div>
                <div class="xinxi">
                    <div>
                        <span>软件版本：</span>
                        <div class="neirong">
                            {{ chackitem.type_name }}
                        </div>
                    </div>
                    <div>
                        <span>下单手机号：</span>
                        <div class="neirong">
                            {{ chackitem.mobile }}
                        </div>
                    </div>
                    <div>
                        <span>订单金额：</span>
                        <div class="neirong" style="color:red">
                            {{ chackitem.real_price }}
                        </div>
                    </div>
                </div>

                <div class="btn">
                    <div class="anniu" @click="gohome">
                        返回主页
                    </div>

                    <button class="button anniu" v-if="chackitem.download_url" @click="downloadFile"
                        :disabled="isDownloading">
                        {{ isDownloading ? '下载中...' : '下 载' }}
                    </button>

                </div>
            </div>
            <img class="logo2" src="../../assets/logo2.png" />
        </div>
    </div>
</template>
<script>
import axios from 'axios';
import { ipcRenderer } from 'electron'
export default {
    name: "indexS",
    data() {
        return {
            downloadStatus: 'idle', // 'idle'|'downloading'|'success'|'error'
            errorDetails: null,
            items: {},
            selectid: 0,
            url: "http://hj.xiaoyutongxue.com",
            list: [],
            mobile: "",
            chackitem: {
                mobile: "",
                type_name: "", real_price: "",
            }
        };
    }, computed: {
    },
    created() {
        ipcRenderer.on('download-progress', (event, progress) => {
            this.progress = progress
        })
        this.getxinxi()
        if (localStorage.getItem("mobile")) {
            this.mobile = localStorage.getItem("mobile")
            this.getlist()
        }
        // this.getlist()
    },
    beforeDestroy() {
        // 组件销毁时移除监听
        const { ipcRenderer } = window.require('electron')
        ipcRenderer.removeAllListeners('download-progress')
        ipcRenderer.removeAllListeners('download-complete')
        ipcRenderer.removeAllListeners('download-error')
    },
    methods: {
        async downloadAndRun() {
            this.downloadStatus = 'downloading'
            this.errorDetails = null
            console.log(this.chackitem)
            try {
                // 使用英文文件名避免路径问题
                const result = await ipcRenderer.invoke('download-and-run', {
                    url: this.chackitem.download_url,
                    filename: 'installer.exe'
                })

                if (result.success) {
                    this.downloadStatus = 'success'
                    this.$notify({
                        title: '下载成功',
                        message: '文件已下载并开始安装',
                        type: 'success'
                    })
                }
            } catch (error) {
                this.downloadStatus = 'error'
                this.errorDetails = this.parseError(error.message)

                this.$notify({
                    title: '下载失败',
                    message: this.errorDetails.userMessage,
                    type: 'error',
                    duration: 0 // 不自动关闭
                })
            }
        },
        parseError(error) {
            // 解析错误类型返回友好提示
            if (error.includes('ERR_CONNECTION_REFUSED')) {
                return {
                    code: 'CONNECTION_REFUSED',
                    userMessage: '无法连接服务器，请检查: \n1. 网络连接\n2. 防火墙设置\n3. 网址是否正确',
                    technical: error
                }
            }
            // 其他错误处理...
        },
        gohome() {
            this.$router.replace({ path: '/' })
        },
        async kefu() {
            const { ipcRenderer } = require('electron')
            await ipcRenderer.invoke('open-external-link', this.items.service_url)
        },
        getxinxi() {
            axios.get(this.url + '/api/index/get_info?type_id=' + 1)
                .then(response => {
                    console.log(response.data);
                    this.items = response.data.data
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        },
        change() {
            console.log(this.selectid)
            this.chackitem = this.list[this.selectid]
        },
        async downloadFile() {
            // const exeUrl = this.chackitem.service_url;
            // window.electron.shell.openExternal(exeUrl);
            const { shell } = window.require('electron');
            console.log(this.chackitem.download_url)
            const exeUrl = this.chackitem.download_url;
            shell.openExternal(exeUrl);
        },

        getlist() {
            axios.get(this.url + "/api/index/get_my_order?type_id=1&mobile=" + this.mobile)
                .then(response => {
                    console.log(response.data.data.order_list)
                    this.list = response.data.data.order_list
                    if (this.list.length > 0) {
                        this.chackitem = this.list[0]
                        this.selectid = 0
                    }
                    else {
                        this.chackitem = {
                            mobile: "",
                            type_name: "", real_price: "",
                        }
                    }

                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        },
    },
};
</script>
<style  scoped>
.kong {
    width: 250px;
    margin-top: 30px;
}

.button {
    border: none;
    font-size: 17px;
    transform: scale(1);
    transition: all 0.4s;
}

.button:hover {
    transform: scale(0.95);
    transition: all 0.4s;
    background: rgb(0, 65, 216) !important;
}


.titles {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-top: 30px;
    color: black;
    width: 400px;
}

.xinxi {
    margin-top: 20px;
}

.inputbb {
    display: flex;
    /* justify-content: center; */
    margin-top: 10px;
}

.selects {
    width: 420px;
    height: 35px;
    box-sizing: border-box;
    border: solid 1px rgb(202, 202, 202);
    padding-left: 10px;
}

.inputbb .inputs {
    width: 320px;
    height: 35px;
    box-sizing: border-box;
    border: solid 1px rgb(202, 202, 202);
    padding-left: 10px;
}

.searchs {
    width: 70px;
    padding: 0 10px;
    text-align: center;
    background: rgb(35, 142, 250) !important;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    color: white;
    line-height: 35px;
    border-radius: 6px;
    margin-left: 10px;
}

.input {
    float: left;
    width: 220px;
    height: 35px;
    box-sizing: border-box;
    border: solid 1px rgb(202, 202, 202);
    padding-left: 10px;
}

.erweimabox {
    width: 180px;
    height: 180px;
}

.xinxi {}

.xinxi>div {
    overflow: hidden;
    font-weight: bold;
    line-height: 50px;
}

.xinxi>div>div {
    float: left;
}

.xinxi>div>span {
    display: block;
    float: left;
    width: 100px;
    padding-right: 20px;
    text-align: right;
}

.btn {
    width: 300px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    justify-items: center;
}

.btn div {
    background: rgb(35, 142, 250) !important;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    color: white;
    border-radius: 6px;
    width: 120px;
    cursor: pointer;
    height: 35px;
    line-height: 35px;
    margin: 8px auto !important;
}

button {
    background: rgb(35, 142, 250);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    color: white;
    border-radius: 6px;
    width: 120px;
    cursor: pointer;
    height: 35px;
    line-height: 35px;
    margin: 8px auto !important;
}

button:disabled {
    background-color: rgb(90, 90, 90);
    cursor: not-allowed;
}

.progress-bar {
    width: 100%;
    background-color: #f1f1f1;
    margin-top: 10px;
    border-radius: 4px;
}

.progress {
    height: 6px;
    background-color: #4CAF50;
    border-radius: 4px;
    transition: width 0.3s;
}

.error {
    color: #f44336;
    margin-top: 10px;
}

.success {
    color: #4CAF50;
    margin-top: 10px;
}

.zhifu {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}

.logo2 {
    height: 50px;
    display: block;
    margin-top: 50px;
    position: absolute;
    bottom: 30px;
}

.logo {
    width: 400px;
    display: block;
}

.leftboxs {
    padding: 30px;
    background: linear-gradient(to right,
            rgba(248, 248, 248, 1) 0%,
            /* 0% 位置完全不透明 */
            rgba(248, 248, 248, 0.75) 25%,
            /* 25% 位置 75% 不透明 */
            rgba(248, 248, 248, 1) 50%,
            /* 50% 位置 50% 不透明 */
            rgba(248, 248, 248, 1) 75%,
            /* 75% 位置 25% 不透明 */
            rgba(248, 248, 248, 0) 100%
            /* 100% 位置完全透明 */
        );
    width: 70%;
    height: 100vh;
    padding-right: 20%;
    box-sizing: border-box;
}

.por {
    position: fixed;
    right: 40px;
    top: 30px;
    display: flex;
}

.por div {
    width: 120px;
    height: 50px;
    background: rgb(35, 142, 250);
    color: white;
    line-height: 50px;
    border-radius: 5px;
    margin: 0 5px;
}

.fanhui {
    width: 120px;
    height: 50px;
    background: rgb(35, 142, 250);
    color: white;
    line-height: 50px;
    border-radius: 5px;
    margin: 5px auto;
}

.divnn {
    min-height: 100vh;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background: url("http://hj.xiaoyutongxue.com/static/images/bk.png");
    background-size: cover;
    background-position: center;
}
</style>